<template>
  <div class="order-management">
    <el-card>
      <div slot="header" class="clearfix">
        <span class="page-title"><i class="el-icon-s-order"></i> 订单管理</span>
        <!-- <div class="header-actions">
          <el-button
            class="add-btn"
            type="primary"
            icon="el-icon-plus"
            @click="showCreateDialog">
            <span class="btn-text">创建订单</span>
          </el-button>
        </div> -->
      </div>
      <div class="search-form">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="订单状态">
            <el-select v-model="searchForm.statue" placeholder="请选择状态" clearable>
              <el-option label="待支付" :value="0"></el-option>
              <el-option label="已支付" :value="1"></el-option>
              <el-option label="已取消" :value="-1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="searchForm.startTime"
              type="date"
              placeholder="选择开始时间"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="searchForm.endTime"
              type="date"
              placeholder="选择结束时间"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
            <el-button type="success" @click="handleExport">导出</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 可配置表格（集成分页） -->
      <configurable-table
        :columns="tableColumns"
        :data="tableData"
        :loading="loading"
        :show-pagination="true"
        :current-page.sync="pagination.current"
        :page-size.sync="pagination.size"
        :pagination-total="pagination.total"
        @page-change="loadData"
        border
        stripe>
        <!-- 订单状态列 -->
        <template #status="{ row }">
          <el-tag :type="getStatusType(row.statue)">
            {{ getStatusText(row.statue) }}
          </el-tag>
        </template>

        <!-- 操作列 -->
        <template #actions="{ row }">
          <el-button size="mini" @click="handleView(row)">查看</el-button>
        </template>
      </configurable-table>
    </el-card>

    <!-- 订单详情对话框 -->
    <el-dialog
      title="订单详情"
      :visible.sync="detailDialogVisible"
      width="850px"
      custom-class="view-dialog">
      <div v-if="detailData" class="detail-content">
        <!-- 订单基本信息 -->
        <div class="info-section">
          <div class="section-title">
            <i class="el-icon-document"></i>
            <span>订单信息</span>
          </div>
          <el-row :gutter="24" class="info-row">
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-tickets"></i>
                  订单ID
                </div>
                <div class="info-value">{{ detailData.id }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-info"></i>
                  订单状态
                </div>
                <div class="item-value">
                  <el-tag :type="getStatusType(detailData.statue)" size="medium">
                    {{ getStatusText(detailData.statue) }}
                  </el-tag>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="info-row">
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-user"></i>
                  用户ID
                </div>
                <div class="item-value">{{ detailData.cuserId || '无' }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-time"></i>
                  创建时间
                </div>
                <div class="item-value">{{ detailData.createTime || '无' }}</div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 商家商品信息 -->
        <div class="info-section">
          <div class="section-title">
            <i class="el-icon-shopping-bag-2"></i>
            <span>商品信息</span>
          </div>
          <el-row :gutter="24" class="info-row">
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-office-building"></i>
                  商家ID
                </div>
                <div class="item-value">{{ detailData.merchantId }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-goods"></i>
                  商品ID
                </div>
                <div class="item-value">{{ detailData.productId }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="info-row">
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-s-data"></i>
                  商品数量
                </div>
                <div class="item-value highlight-number">{{ detailData.num }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-collection-tag"></i>
                  商品属性
                </div>
                <div class="item-value">{{ detailData.attribute || '无' }}</div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 价格信息 -->
        <div class="info-section">
          <div class="section-title">
            <i class="el-icon-coin"></i>
            <span>价格信息</span>
          </div>
          <el-row :gutter="24" class="info-row">
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-price-tag"></i>
                  商品单价
                </div>
                <div class="item-value price-value">
                  ¥{{ detailData.price ? (detailData.price / 100).toFixed(2) : '0.00' }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-star-off"></i>
                  积分单价
                </div>
                <div class="item-value point-value">{{ detailData.pointPrice || '0' }} 积分</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="info-row">
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-wallet"></i>
                  订单金额
                </div>
                <div class="item-value price-value">
                  ¥{{ detailData.amount ? (detailData.amount / 100).toFixed(2) : '0.00' }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-star-off"></i>
                  积分金额
                </div>
                <div class="item-value point-value">{{ detailData.pointAmount || '0' }} 积分</div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 支付信息 -->
        <div class="info-section highlight-section payment-section">
          <div class="section-title">
            <i class="el-icon-bank-card"></i>
            <span>支付信息</span>
          </div>
          <el-row :gutter="24" class="info-row">
            <el-col :span="12">
              <div class="info-item highlight-item">
                <div class="info-label">
                  <i class="el-icon-money"></i>
                  实付金额
                </div>
                <div class="item-value price-value highlight-price">
                  ¥{{ detailData.payAmount ? (detailData.payAmount / 100).toFixed(2) : '0.00' }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item highlight-item">
                <div class="info-label">
                  <i class="el-icon-star-on"></i>
                  实付积分
                </div>
                <div class="item-value point-value highlight-point">
                  {{ detailData.payPointAmount || '0' }} 积分
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false" size="medium">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 创建订单对话框 -->
    <el-dialog title="创建订单" :visible.sync="createDialogVisible" width="600px" :close-on-click-modal="false" custom-class="action-dialog">
      <el-form :model="createForm" :rules="createRules" ref="createForm" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商品ID" prop="productId">
              <el-input-number v-model="createForm.productId" :min="1" style="width: 100%"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商家ID" prop="merchantId">
              <el-input-number v-model="createForm.merchantId" :min="1" style="width: 100%"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商品数量" prop="num">
              <el-input-number v-model="createForm.num" :min="1" style="width: 100%" @change="updateCalculatedAmounts"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户ID" prop="cuserId">
              <el-input-number v-model="createForm.cuserId" :min="1" style="width: 100%"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="商品价格(分)" prop="price">
              <el-input-number v-model="createForm.price" :min="0" style="width: 100%" @change="updateCalculatedAmounts"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="积分价格" prop="pointPrice">
              <el-input-number v-model="createForm.pointPrice" :min="0" style="width: 100%" @change="updateCalculatedAmounts"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="订单金额(分)" prop="amount">
              <el-input-number v-model="createForm.amount" :min="0" style="width: 100%"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="积分金额" prop="pointAmount">
              <el-input-number v-model="createForm.pointAmount" :min="0" style="width: 100%"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="支付金额(分)" prop="payAmount">
              <el-input-number v-model="createForm.payAmount" :min="0" style="width: 100%"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付积分" prop="payPointAmount">
              <el-input-number v-model="createForm.payPointAmount" :min="0" style="width: 100%"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="商品属性" prop="attribute">
          <el-input v-model="createForm.attribute" placeholder="请输入商品属性"></el-input>
        </el-form-item>

        <el-form-item label="订单状态" prop="statue">
          <el-select v-model="createForm.statue" placeholder="请选择订单状态" style="width: 100%">
            <el-option label="待支付" :value="0"></el-option>
            <el-option label="已支付" :value="1"></el-option>
            <el-option label="已取消" :value="-1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="createDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCreateSubmit" :loading="createLoading">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getOrderPage, getOrderList, getOrderDetail, createOrder } from '@/api/aggregation'

// 订单状态常量
const ORDER_STATUS = {
  CANCELLED: -1,  // 已取消
  PENDING: 0,     // 待支付
  PAID: 1         // 已支付
}

// 订单状态类型映射
const STATUS_TYPE_MAP = {
  [ORDER_STATUS.PENDING]: 'warning',
  [ORDER_STATUS.PAID]: 'success',
  [ORDER_STATUS.CANCELLED]: 'info'
}

// 订单状态文本映射
const STATUS_TEXT_MAP = {
  [ORDER_STATUS.PENDING]: '待支付',
  [ORDER_STATUS.PAID]: '已支付',
  [ORDER_STATUS.CANCELLED]: '已取消'
}

export default {
  name: 'OrderManagement',
  data() {
    return {
      loading: false,
      searchForm: {
        statue: null,
        startTime: this.getDefaultStartTime(),
        endTime: this.getDefaultEndTime()
      },
      tableData: [],
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      // 表格列配置
      tableColumns: [
        {
          prop: 'id',
          label: '订单ID',
          minWidth: 100
        },
        {
          prop: 'merchantName',
          label: '商家名称',
          minWidth: 150
        },
        {
          prop: 'productName',
          label: '商品名称',
          minWidth: 150
        },
        {
          prop: 'amount',
          label: '订单金额',
          minWidth: 100,
          align: 'right',
          formatter: (row, column, cellValue) => {
            return `¥${(cellValue / 100).toFixed(2)}`
          }
        },
        {
          prop: 'statue',
          label: '订单状态',
          minWidth: 100,
          slot: 'status'
        },
        {
          prop: 'createTime',
          label: '下单时间',
          minWidth: 180
        },
        {
          label: '操作',
          minWidth: 150,
          fixed: 'right',
          slot: 'actions'
        }
      ],
      // 详情对话框
      detailDialogVisible: false,
      detailData: null,
      // 创建订单对话框
      createDialogVisible: false,
      createLoading: false,
      createForm: {
        productId: null,
        merchantId: null,
        num: 1,
        pointPrice: 0,
        price: 0,
        amount: 0,
        pointAmount: 0,
        payAmount: 0,
        payPointAmount: 0,
        attribute: '',
        statue: ORDER_STATUS.PENDING,
        cuserId: null
      },
      createRules: {
        productId: [
          { required: true, message: '请输入商品ID', trigger: 'blur' }
        ],
        merchantId: [
          { required: true, message: '请输入商家ID', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '请输入商品数量', trigger: 'blur' },
          { type: 'number', min: 1, message: '商品数量必须大于0', trigger: 'blur' }
        ],
        cuserId: [
          { required: true, message: '请输入用户ID', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' },
          { type: 'number', min: 0, message: '商品价格不能为负数', trigger: 'blur' }
        ],
        statue: [
          { required: true, message: '请选择订单状态', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    /**
     * 获取默认开始时间（往前推6天）
     */
    getDefaultStartTime() {
      const today = new Date()
      const startDate = new Date(today)
      startDate.setDate(today.getDate() - 6)
      return this.formatDate(startDate)
    },

    /**
     * 获取默认结束时间（今天）
     */
    getDefaultEndTime() {
      const today = new Date()
      return this.formatDate(today)
    },

    /**
     * 格式化日期为 YYYY-MM-DD
     */
    formatDate(date) {
      return date.toISOString().split('T')[0]
    },

    /**
     * 格式化时间范围（添加时分秒）
     */
    formatTimeRange(dateStr, isEndTime = false) {
      if (!dateStr) return ''
      return isEndTime ? `${dateStr} 23:59:59` : `${dateStr} 00:00:00`
    },
    /**
     * 构建查询参数
     */
    buildQueryParams() {
      const params = {
        pageIndex: this.pagination.current,
        pageSize: this.pagination.size,
        startTime: this.formatTimeRange(this.searchForm.startTime, false),
        endTime: this.formatTimeRange(this.searchForm.endTime, true)
      }

      // 只有当选择了有效状态时才添加statue字段
      if (this.searchForm.statue !== null && this.searchForm.statue !== '') {
        params.statue = this.searchForm.statue
      }

      return params
    },

    /**
     * 加载订单数据
     */
    async loadData() {
      this.loading = true
      try {
        const params = this.buildQueryParams()

        Logger.log('=== 订单查询参数 ===', params)

        const response = await getOrderPage(params)
        Logger.log('订单查询API响应:', response)

        if (response.code === 0) {
          this.tableData = response.data.list || []
          this.pagination.total = response.data.total || 0
          Logger.log('成功加载订单数据:', this.tableData.length, '条')
        } else {
          this.handleError('API返回失败: ' + (response.msg || '未知错误'))
          this.clearTableData()
        }
      } catch (error) {
        this.handleApiError(error, '加载订单数据失败')
        this.clearTableData()
      } finally {
        this.loading = false
      }
    },

    /**
     * 清空表格数据
     */
    clearTableData() {
      this.tableData = []
      this.pagination.total = 0
    },

    /**
     * 处理API错误
     */
    handleApiError(error, title = '操作失败') {
      Logger.error(`${title}:`, error)

      if (error.response) {
        const { status, data } = error.response
        const errorMsg = data?.message || data?.error || data?.msg

        if (status === 500) {
          this.$message.error(`服务器错误: ${errorMsg || '内部错误'}`)
        } else {
          this.$message.error(`请求失败(${status}): ${errorMsg || '未知错误'}`)
        }
      } else {
        this.$message.error('网络错误，请检查网络连接')
      }
    },

    /**
     * 处理通用错误
     */
    handleError(message) {
      Logger.error(message)
      this.$message.error(message)
    },
    /**
     * 获取订单状态类型（用于el-tag）
     */
    getStatusType(status) {
      return STATUS_TYPE_MAP[status] || 'info'
    },

    /**
     * 获取订单状态文本
     */
    getStatusText(status) {
      return STATUS_TEXT_MAP[status] || '未知'
    },
    /**
     * 搜索订单
     */
    handleSearch() {
      this.pagination.current = 1
      this.loadData()
    },

    /**
     * 重置搜索条件
     */
    handleReset() {
      this.searchForm = {
        statue: null,
        startTime: this.getDefaultStartTime(),
        endTime: this.getDefaultEndTime()
      }
      this.pagination.current = 1
      this.loadData()
    },
    /**
     * 导出订单数据
     */
    async handleExport() {
      try {
        this.$message.info('正在导出订单数据...')

        // 构建导出参数（大批量数据）
        const params = {
          ...this.buildQueryParams(),
          pageIndex: 1,
          pageSize: 10000
        }

        Logger.log('导出订单参数:', params)
        const response = await getOrderList(params)

        if (response.code === 0) {
          const orders = response.data?.list || []

          if (orders.length === 0) {
            this.$message.warning('没有可导出的订单数据')
            return
          }

          // ✅ 使用全局方法：将表格列配置转换为导出列配置
          const exportColumns = this.$convertTableColumnsToExport(
            this.tableColumns,
            {
              // 为使用了 slot 的列提供格式化函数
              statue: (value) => this.getStatusText(value)
            },
            {
              // 排除操作列
              excludeProps: ['actions']
            }
          )

          // ✅ 使用全局方法：导出Excel文件
          this.$export(
            'excel',
            orders,
            exportColumns,
            `订单数据_${this.formatDate(new Date())}`,
            {
              sheetName: '订单数据',
              textColumns: [0] // 将订单ID列设置为文本格式
            }
          )

          this.$message.success(`成功导出 ${orders.length} 条订单数据`)
          Logger.log('成功导出订单数据:', orders.length, '条')
        } else {
          this.$message.error('导出失败：' + (response.msg || '未知错误'))
        }
      } catch (error) {
        this.handleApiError(error, '导出订单失败')
      }
    },

    /**
     * 查看订单详情
     */
    async handleView(row) {
      try {
        Logger.log('查看订单详情，ID:', row.id)
        const response = await getOrderDetail({ id: row.id })

        if (response.code === 0) {
          this.detailData = response.data
          this.detailDialogVisible = true
          Logger.log('成功获取订单详情')
        } else {
          this.$message.error('获取订单详情失败')
        }
      } catch (error) {
        this.handleApiError(error, '获取订单详情失败')
      }
    },

    /**
     * 显示创建订单对话框
     */
    showCreateDialog() {
      this.createDialogVisible = true
      this.resetCreateForm()
    },

    /**
     * 重置创建表单
     */
    resetCreateForm() {
      this.createForm = {
        productId: null,
        merchantId: null,
        num: 1,
        pointPrice: 0,
        price: 0,
        amount: 0,
        pointAmount: 0,
        payAmount: 0,
        payPointAmount: 0,
        attribute: '',
        statue: ORDER_STATUS.PENDING,
        cuserId: null
      }

      // 清除表单验证
      this.$nextTick(() => {
        if (this.$refs.createForm) {
          this.$refs.createForm.clearValidate()
        }
      })
    },

    /**
     * 实时更新计算的金额
     */
    updateCalculatedAmounts() {
      const num = Number(this.createForm.num) || 1
      const price = Number(this.createForm.price) || 0
      const pointPrice = Number(this.createForm.pointPrice) || 0

      // 自动计算并更新金额字段
      this.createForm.amount = price * num
      this.createForm.pointAmount = pointPrice * num
      this.createForm.payAmount = price * num
      this.createForm.payPointAmount = pointPrice * num

      Logger.log('实时计算金额:', {
        num, price, pointPrice,
        amount: this.createForm.amount,
        pointAmount: this.createForm.pointAmount
      })
    },

    /**
     * 计算订单金额并构建提交数据
     */
    calculateOrderAmounts() {
      const form = this.createForm

      // 确保所有字段都有值
      const num = Number(form.num) || 1
      const price = Number(form.price) || 0
      const pointPrice = Number(form.pointPrice) || 0

      // 计算订单金额 = 商品价格 * 数量
      const amount = price * num
      const pointAmount = pointPrice * num

      return {
        productId: Number(form.productId),
        merchantId: Number(form.merchantId),
        num,
        pointPrice,
        price,
        amount,
        pointAmount,
        payAmount: amount,
        payPointAmount: pointAmount,
        attribute: String(form.attribute || ''),
        statue: Number(form.statue),
        cuserId: Number(form.cuserId)
      }
    },

    /**
     * 提交创建订单
     */
    async handleCreateSubmit() {
      try {
        // 表单验证
        await this.$refs.createForm.validate()
        this.createLoading = true

        // 自动计算金额并构建提交数据
        const submitData = this.calculateOrderAmounts()
        Logger.log('创建订单，提交数据:', submitData)

        const response = await createOrder(submitData)

        if (response.code === 0) {
          this.$message.success('订单创建成功')
          this.createDialogVisible = false
          this.loadData() // 刷新列表
          Logger.log('订单创建成功')
        } else {
          this.$message.error('创建失败: ' + (response.msg || '未知错误'))
        }
      } catch (error) {
        // 验证失败时不是API错误
        if (error.constructor.name === 'Error') {
          Logger.log('表单验证失败')
          return
        }
        this.handleApiError(error, '创建订单失败')
      } finally {
        this.createLoading = false
      }
    }
  }
}
</script>

<style scoped>
.order-management {
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}


/* 价格值样式 */
.price-value {
  color: #f56c6c;
  font-size: 16px;
  font-weight: 700;
}

.highlight-price {
  font-size: 20px;
  color: #ff4d4f;
}

/* 积分值样式 */
.point-value {
  color: #e6a23c;
  font-weight: 700;
}

.highlight-point {
  font-size: 18px;
  color: #fa8c16;
}

/* 表格样式优化 */
.el-table {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.el-table th {
  background: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

/* 状态标签样式优化 */
.el-tag {
  border-radius: 12px;
  font-weight: 500;
  padding: 4px 12px;
}

/* 页面标题样式 */
.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

/* 头部操作区域 */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 创建订单按钮样式 */
.add-btn {
  position: relative;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.add-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

.add-btn:hover::before {
  left: 100%;
}

.add-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.add-btn .btn-text {
  position: relative;
  z-index: 1;
}

.add-btn .el-icon-plus {
  margin-right: 8px;
  font-size: 16px;
}

/* 卡片头部样式 */
.el-card__header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #dee2e6;
  border-radius: 8px 8px 0 0;
  padding: 20px 24px;
}

.el-card__header .clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-card__header .page-title {
  color: #2c3e50;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
</style>
